<template>
  <el-form :model="form" ref="ruleFormRef" :labelWidth="labelWidth1" style="display: flex">
    <el-form-item label="省份" prop="pId">
      <el-select
        v-model="form.province"
        placeholder="请选择省份"
        @change="provinceChange"
        clearable
        @clear="clearProvince"
        value-key="id"
        :style="{ width: selectWidth }"
      >
        <el-option v-for="(province, key) in provinces" :key="key" :value="province" :label="province.provienceName">
          {{ province.provienceName }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="城市" prop="cId">
      <el-select
        v-model="form.city"
        placeholder="请选择城市"
        clearable
        @clear="clearCity"
        value-key="id"
        @change="cityChange"
        :disabled="!form.province"
        :style="{ width: selectWidth }"
      >
        <el-option v-for="(city, key) in cities" :key="key" :value="city" :label="city.city">
          {{ city.city }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="确认时间">
      <el-date-picker
        v-model="form.confirmDate"
        type="date"
        placeholder="选择确认时间"
        :disabledDate="hiredateDisabledDate"
        :shortcuts="hiredateShortcuts"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <div class="btn">
        <el-button type="success" @click="searchSql" :icon="Search">查询</el-button>
        <el-button type="warning" @click="resetForm(ruleFormRef)" :icon="Delete">清空</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import addressSelect from '../supervisor/addressSelect.vue'
import { ref } from 'vue'
import $axios from '../utils/axios'
import { Search, Delete } from '@element-plus/icons-vue'

//定义日历的禁用日期计算属性
const hiredateDisabledDate = (time) => time.getTime() > new Date().getTime()

//定义日期的快捷键 快速选择
const hiredateShortcuts = [
  {
    text: '昨天',
    value: () => {
      let now = new Date().getTime()
      now -= 86400000
      return new Date().setTime(now)
    }
  },
  {
    text: '前天',
    value: () => {
      let now = new Date().getTime()
      now -= 86400000 * 2
      return new Date().setTime(now)
    }
  },
  {
    text: '7天前',
    value: () => {
      let now = new Date().getTime()
      now -= 86400000 * 7
      return new Date().setTime(now)
    }
  }
]

const ruleFormRef = ref()
const form = ref({})

const tableData = ref({})

// 收到父组件 确认列表 的分页信息
const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  labelWidth: {
    type: String,
    default: '100px' // 设置默认的 label 宽度
  },
  selectWidth: {
    type: String,
    default: '50px' // 设置默认的 select 宽度
  }
})

const provinces = ref({})
// 加载省份
const init = async () => {
  const path = '/api/supervisor/selectProvince'
  const { data: res } = await $axios.get(path)
  console.log(res)
  if (res.code === '200') {
    provinces.value = res.data
  }
}
init()

const clearProvince = () => {
  form.value.provinceId = null
}

const clearCity = () => {
  form.value.cityId = null
}

const cities = ref({})
// 省份改变的监听事件，查询省份的城市
let provinceChange = async (provincep) => {
  const provinceId = provincep.id
  const path = `/api/supervisor/selectCity/${provinceId}` // 注意路径字符串的引号
  const { data: res } = await $axios.get(path)
  if (res.code === '200') {
    cities.value = res.data
  }
  // 设置省份ID到表单对象
  form.value.provinceId = provinceId
}

// 城市改变的监听事件
let cityChange = async (city) => {
  const cityId = city.id
  // 设置城市ID到表单对象
  form.value.cityId = cityId
}
// 读取传递的数据给value
const pageNum = props.currentPage
const pageSize = props.pageSize
const total = ref('')

const labelWidth1 = '80px'
let selectWidth = '120px'
let labelWidth = '68px'

//接受子组件 省市区选择组件 的值
const grid = ref()
const selectChanged = (f) => {
  grid.value = f
  // console.log(grid.value.province.id, grid.value.city.id, grid.value.town.id);
  // form.value.pId = f.province.id
  // form.value.cId = f.city.id
  // form.value.tId = f.town.id
  // labelWidth = lw
  // selectWidth = sw
}

// ----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------BUG----------
// 向父组件 确认列表 传递查询结果
const emits = defineEmits(['search', 'a', 'b', 'c'])
const searchSql = async () => {
  // form.value.provinceId = grid.value.province.id
  // form.value.cityId = grid.value.city.id
  form.value.pageNum = pageNum
  form.value.pageSize = pageSize
  console.log(form.value)
  const path = '/api/feedback/queryQuality'
  const { data: res } = await $axios.post(path, form.value)
  if (res.code === '200') {
    console.log('res', res)
    tableData.value = res.data.list
    total.value = res.data.total
  }
  emits('search', tableData.value, pageNum, pageSize, total.value)
}

// const resetFormData = ref(null);

const resetForm = (formEl) => {
  // formEl.resetFields()
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.radio {
  padding: 5px;
}
</style>
